<template>
	<el-dialog title="修改密码" :visible.sync="visible" top="0" width="560px" append-to-body>
		<el-form v-bind="formConfig" :model="passForm" :rules="passRules" :label-width="labelWidth" :label-position="labelPosition">
			<el-form-item label="新密码" prop="password">
				<el-input v-model="passForm.password" show-password placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="confirmPassword">
				<el-input v-model="passForm.confirmPassword" show-password placeholder="请再次输入密码"></el-input>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="visible = false">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	props: {
		value: { type: Boolean, default: false }
	},
	data() {
		// 重复密码验证
		const pwdAgainCheck = async (rule, value, callback) => {
			//这样才能在回调里通过箭头函数获取到this对象
			if (value !== this.passForm.password) {
				callback(new Error('与密码不一致'));
			} else {
				//校验通过
				callback();
			}
		};
		return {
			visible: this.value,
			screenWidth: 0,
			passForm: {},
			formConfig: {
				ref: 'form',
				class: 'pass_update_form'
			},
			passRules: {
				password: [
					{ required: true, message: '请输入6~16个字符（数字、字母）', trigger: 'blur' },
					{ pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/, message: '请输入6~16个字符（数字、字母）', trigger: 'blur' }
				],
				confirmPassword: [
					{ required: true, message: '请再次输入密码', trigger: 'blur' },
					{ validator: pwdAgainCheck, trigger: 'blur' }
				]
			}
		};
	},
	computed: {
		labelWidth() {
			return this.isMobile ? '' : '80px';
		},
		labelPosition() {
			return this.isMobile ? 'top' : 'right';
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	}
};
</script>

<style lang="scss" scoped>
.pass_update_form {
	flex: 1;
	overflow: hidden;
}
</style>
